<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="慧友云商,十九大,大家社区,党建,智慧,中央网信办移动局,人民论坛网">
    <meta name="description" content="党建项目十九大理论竞赛慧友云商技术支持"/>
    <title>十九大理论学习竞赛</title>
    <link rel="stylesheet" href="__PUBLIC__index/css/common.css?v=2">
    <link rel="stylesheet" href="__PUBLIC__index/css/index.css?v=2">
    <link rel="stylesheet" href="__PUBLIC__index/css/page2.css?v=2">
    <link rel="stylesheet" href="__PUBLIC__index/css/page3.css?v=2">
</head>
<body class="">
<div class="index">
    <div class="index_bg-top in"></div>
    <div class="index_bg-bottom"></div>
    <div class="index_main">
        <div class="index_title in" style="font-family: sans-serif;
    font-size: 27px;">国网2018“两会”精神学习</div>
        <div class="index_start in">挑战赛</div>
    </div>
    <div class="index_support in">
        <div class="index_support-inner">
            <p>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;办：国家英大传媒</p>
            <p>平台支撑：电网头条客户端</p>
            <p></p>
        </div>
    </div>
    <div class="index_book in">
        <img src="__PUBLIC__index/img/book.png" alt="">
    </div>
    <div class="index_next">
        <span class="index_next-icon in"></span>
    </div>
</div>
<div class="page2_main">
    <div class="page2_img">
        <img src="__PUBLIC__index/img/title.png">
    </div>
    <div class="page2_content">
        <p>贯彻公司两会精神</p>
        <p>答完可以看全省排行榜哦！</p>
        <p>更可以分享给你身边的人</p>
        <p>一起来比拼</p>
    </div>
    <div class="page2_login">
        <label for="">
            <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
            <input type="text" id="vname" placeholder="请输入姓名">
        </label>
        <label for="">
            <span>单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
            <input type="text" id="vunit"  placeholder="请输入单位">
        </label>
        <label for="">
            <span>手机号码：</span>
            <input type="text" id="vmobile" placeholder="请输入手机号码">
        </label>
    </div>
    <div class="page2_btn">
        <a class="page2_btn_start" href="javascript:void(0);">开始答题</a>
    </div>
</div>
<div class="page3_main" style="display: none;">
    <div class="page3_num">
        <span>1/{$list_count.single_count}</span>
    </div>
    <div class="page3_QA">
        <!--<div class="page3_Q" id="question_1">十九大报告指出，我们党最鲜明的品格是（ ）</div>
        <div class="page3_A" id="answer_1" data-id="1">
            <ol>
                <li data-id="1" data-type="1" data-answer="A">
                    <span class="page3_A-icon" answerRight="2" answerValue="1">A、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我革新</span>
                        <img class="page3_A-img" style="display:none" src="__PUBLIC__index/img/page6_error.png">
                    </div>
                </li>
                <li data-id="1" data-type="1" data-answer="B">
                    <span class="page3_A-icon" answerRight="2" answerValue="2">B、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我革命</span>
                        <img class="page3_A-img _yes" style="display:none" src="__PUBLIC__index/img/page6_corrent.png">
                    </div>
                </li>
                <li data-id="1" data-type="1" data-answer="C">
                    <span class="page3_A-icon" answerRight="2" answerValue="3">C、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我纠错，从严管党治党</span>
                        <img class="page3_A-img" style="display:none" src="__PUBLIC__index/img/page6_error.png">
                    </div>
                </li>
            </ol>
        </div>
        <div class="page3_pagination">
            <a class="pagination_submit _next" href="javascript:void(0);">提交答案</a>
        </div>
        <div class="page3_Q" id="question_2" style="display: none">十九大报告指出，我们党最鲜明的品格是（ ）</div>
        <div class="page3_A" id="answer_2" data-id="2" style="display: none">
            <ol>
                <li data-id="2" data-type="2" data-answer="A">
                    <span class="page3_A-icon" answerRight="2" answerValue="1">A、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我革新</span>
                        <img class="page3_A-img" style="display:none" src="__PUBLIC__index/img/page6_error.png">
                    </div>
                </li>
                <li data-id="2" data-type="2" data-answer="B">
                    <span class="page3_A-icon" answerRight="2" answerValue="2">B、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我革命</span>
                        <img class="page3_A-img _yes" style="display:none" src="__PUBLIC__index/img/page6_corrent.png">
                    </div>
                </li>
                <li data-id="2" data-type="2" data-answer="C">
                    <span class="page3_A-icon" answerRight="2" answerValue="3">C、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">勇于自我纠错，从严管党治党</span>
                        <img class="page3_A-img" style="display:none" src="__PUBLIC__index/img/page6_error.png">
                    </div>
                </li>
            </ol>
        </div>
        <div class="page3_pagination" style="display: none" id="button_2">
            <a class="pagination_submit _next" href="javascript:void(0);">提交答案</a>
        </div>
-->
        {foreach name="single_list" item="vo" key="key"}
        <div class="page3_Q" id="question_{$key+1}" {if condition='$key neq 0'}style="display: none" {/if}>
             {if condition="$vo.type eq 1  "} 【单选题】 {elseif condition="$vo.type eq 2 "/}【多选题】{else /}【判断题】{/if}
            {$vo.topic}
        </div>
        <div class="page3_A" id="answer_{$key+1}" data-id="{$vo.id}" {if condition='$key neq 0'}style="display: none"{/if}>
            <ol>
                {foreach name="vo.select" item="v" key="k" }
                <li data-id="{$vo.id}" data-type="{$vo.type}" data-answer="{$k}">
                    <span class="page3_A-icon" >{$k}、</span>
                    <div class="page3_A-text-textImg">
                        <span class="page3_A-text">{$v}</span>
                        <img class="page3_A-img

                             {php} if(in_array($k,$vo['answer'])){
                        echo '_yes';
                           }
                             {/php}"
                             style="display:none"
                             src="__PUBLIC__index/img/{php}if(in_array($k,$vo['answer'])){
                            echo 'page6_corrent.png';
                           }else{
                            echo 'page6_error.png';
                           }{/php}"
                    </div>
                </li>
                {/foreach}
            </ol>
        </div>

        {/foreach}

    </div>
    <div class="page3_pagination" >
        <a class="pagination_submit _next" href="javascript:void(0);">提交答案</a>
    </div>

</div>



</div>
</body>
<script src="__PUBLIC__index/js/zepto.min.js"></script>
<!--<script src="__PUBLIC__index/js/index.js"></script>-->
<script>
    Zepto(function ($) {
        var height = $('body')[0].clientHeight;

        $("input").focus(function(){
            $('body').height(height);
        });
        $("input").blur(function(){
            $('body').height(height);
        });
        console.log({$single_list|json_encode});
        var arrs = [];
        var myAnswer = [];
        var user_data = [];
        var last = false;


        Array.prototype.indexOf = function (val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };

        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        // 切换页面
        $(".index").click(function () {
            $(".in").each(function () {
                $(this).removeClass("in").addClass("out");
            });

            setTimeout(function () {
                $(".index_main,.index_next,.index_book,.index_support,.index_bg-top").hide();
            }, 1000);
            $(".page2_main").addClass("in");
        });
        var startPosition, endPosition, moveLength;

        $(document).bind('touchstart', function (e) {
            var touch = e.touches[0];
            startPosition = {
                y: touch.pageY
            }
        }).bind('touchmove', function (e) {
            var touch = e.touches[0];
            endPosition = {
                y: touch.pageY
            };
            moveLength = endPosition.y - startPosition.y;

            if (Math.abs(moveLength) > 60) {
                $(".in").each(function () {
                    $(this).removeClass("in").addClass("out");
                });
                setTimeout(function () {
                    $(".index_main,.index_next,.index_book,.index_support,.index_bg-top").hide();
                }, 1000);
                $(".page2_main").addClass("in");
            }
        });

        // 点击开始答题按钮
        $(".page2_btn_start").on("click", function () {
            var username = $("#vname").val();
            var company = $("#vunit").val();
            var mobile = $("#vmobile").val();

            // $(".page2_main").hide();
            // $(".page3_main").show();
            // $(".page3_QA").eq(0).height($(window).height() - 167);
            // return;

            if (!username) {
                alert('请填写姓名');
                return false;
            }
            if (!company) {
                alert('请填写单位');
                return false;
            }
            if (!mobile) {
                alert('请填写手机');
                return false;
            }
            var myreg = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (!myreg.test(mobile)) {
                alert('请输入有效的手机号码！');
                return false;
            }
            user_data = {
                'username': username,
                'company': company,
                'mobile': mobile,
            }
            var url = "/index/index/checkjoin";
            $.post(url, user_data, function (data) {
                if (data.code == 1) {
                    $(".page2_main").hide();
                    $(".page3_main").show();
                    $(".page3_QA").eq(0).height($(window).height() - 167);
                } else {
                    alert('每日最多答题3次,明天再来吧');
                    return false;
                }
            });

        });




        var questionnaireID = $("#questionnaireID").val();
        var pageNumber = 1;

        $(".page3_A").on("click", "li", function () {
            var index = $(this).index();
            var answer = '';
            var r = $(this).parent().find(".page3_A-icon").eq(index);

            var id = $(this).attr('data-id');
            if (!contains(arrs,id)) {
                //单选
                if ($(this).attr('data-type') == '1') {
                    answer = $(this).attr('data-answer');
                    myAnswer[id] = answer;
                    $(this).parent().find(".selected").removeClass('selected');
                    r.addClass('selected');

                }else {
                    answer = $(this).attr('data-answer');

                    //多选
                    if (r.hasClass('selected')) {
                        //删除元素
                        var myArr =  myAnswer[id].split(',');
                        myArr.remove(answer);
                        myAnswer[id] = myArr.join(',');
                        r.removeClass('selected');
                    } else {
                        if (myAnswer[id] == undefined ) {
                            myAnswer[id] = answer;
                        }else {
                            myAnswer[id] = myAnswer[id]+','+ answer;
                        }
                        r.addClass('selected');
                    }
                }
            }
            console.log(myAnswer);

            // 显示题目正确与错误的图标
            // $(this).parent().children("li").children(".page3_A-text-textImg").children("._yes").css("display", "inline-block");
            // $(this).children(".page3_A-text-textImg").children(".page3_A-img").css("display", "inline-block");
        });


        function contains(arr, obj) {
            var i = arr.length;
            while (i--) {
                if (arr[i] === obj) {
                    return true;
                }
            }
            return false;
        }


        // 点击下一题按钮显示下一题页面
        function showQuestion(pageNumber) {
            $(".page3_num span").html(pageNumber + "/{$list_count.single_count}");
            $(".page3_Q").hide();
            $(".page3_A").hide();
            $("#question_" + pageNumber).show();
            $("#answer_" + pageNumber).show();
        }

        // 提交答案事件
        function submit() {
            // var answer = "";
            // var score = 0;
            // $(".page3_A").each(function (index) {
            //     var selected = $(this).find(".selected");
            //     var val = selected.attr("answerValue");
            //     var rval = selected.attr("answerRight");
            //     if (val == rval) {
            //         score = score + 10;
            //     }
            //     answer = answer + val + ",";
            // });
            // var loadingStr = "得分" + score + "<br>排名计算中";
            var url = "/index/index/savedata";
            allData = {
                'user_data':user_data,
                'topic_data':myAnswer
            }
            console.log(allData);
            // var submitTimeout = setTimeout(function () {
            //     window.location.href = "https://cdns1.dajiashequ.com/da19/errorv3.html";
            // }, 50000);
            window.location.href = url+'?data='+JSON.stringify(allData);  // 结果页面的路径

            return;

            try {
                $.post(url, data, function (data, status) {
                    clearTimeout(submitTimeout);
                    if (data && data.result == "success") {
                        window.location.href = "/result/paper/";  // 结果页面的路径
                    } else {
                        window.location.href = "https://cdns1.dajiashequ.com/da19/errorv3.html";  // 错误页面
                    }
                });
            } catch (e) {
                alert("网络异常");
                window.location.href = "https://cdns1.dajiashequ.com/da19/errorv3.html";
            }
        }

        // 下一题（提交答案）按钮点击事件
        $("._next").on("click", function () {

            if (last) {
                submit();
                return;
            }
            if ($("._next").hasClass('pagination_submit') ) {
                //console.log($("#answer_" + pageNumber).attr('data-id'));
                var id = $("#answer_" + pageNumber).attr('data-id');
                if (myAnswer[id] == undefined || myAnswer[id] == '' ) {
                    alert('请选择答案');
                    return false;
                }
                arrs.push(id);
                $("#answer_"+pageNumber).find('li').children(".page3_A-text-textImg").children("._yes").css("display", "inline-block");
                $("#answer_"+pageNumber).find('li').children(".page3_A-text-textImg").children(".page3_A-img").css("display", "inline-block");

                if (pageNumber == {$list_count.single_count}) {
                    last = true;
                    $("._next").removeClass("pagination_next").addClass("pagination_submit");
                } else {
                    $("._next").removeClass("pagination_submit").addClass("pagination_next");
                }
                return;
            }
            pageNumber++;

            showQuestion(pageNumber);
            if ($("._next").hasClass('pagination_next')) {
                $("._next").removeClass("pagination_next").addClass("pagination_submit");
            }
            // $(this).hide();
        });
    });

</script>
</html>
